<template>
    <div :style="{background:bgColor}" class="ivu-shrinkable-menu">
        <slot name="top"></slot>
        <sidebar-menu v-show="!shrink"
                      :menu-theme="theme"
                      :menu-list="menuList"
                      :open-names="openNames"
                      @on-change="handleChange">

        </sidebar-menu>
        <sidebar-menu-shrink v-show="shrink"
                             :menu-theme="theme"
                             :menu-list="menuList"
                             :icon-color="shrinkIconColor"
                             @on-change="handleChange">

        </sidebar-menu-shrink>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Emit} from 'vue-property-decorator';
import AppBase from '@/lib/abpbase';
import SidebarMenu from './components/sidebar-menu.vue';
import SidebarMenuShrink from './components/sidebar-menu-shrink.vue';
import Util from '@/lib/util';

@Component({
    components: {
        SidebarMenu,
        SidebarMenuShrink,
    },
})
export default class ShrinkableMenu extends AppBase {
    name: string = 'ShrinkableMenu';

    @Prop({type: Boolean}) shrink: boolean;
    @Prop({required: true, type: Array}) menuList: any[];
    @Prop({type: Array}) openNames: string[];
    @Prop({type: Function}) beforePush: (name: string) => boolean;
    @Prop({
        validator: (val) => {
            return Util.oneOf(val, ['dark', 'light']);
        },
    }) theme: string;

    get bgColor() {
        return this.theme === 'dark' ? '#191a23' : '#fff';
    }

    get shrinkIconColor() {
      return this.theme === 'dark' ? '#fff' : '#191a23';
    }

    @Emit('on-change')
    handleChange(name: string) {
        let willPush = true;
        if (this.beforePush !== undefined) {
            if (!this.beforePush(name)) {
                willPush = false;
            }
        }
        if (willPush) {
            this.$router.push({name: name});
        }
    }
}
</script>

<style lang="less" scoped>
@import './styles/shrinkable-menu.less';
</style>
